
<template>
  <div>
    <el-table
      class="competeTable"
      :data="tableData"
      height="460"
      :header-cell-style="{fontWeight:'normal'}"
      border
      highlight-current-row
      style="width: 100%;"
      size="small"
    >
      <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
      <el-table-column prop="goodBrand" align="center" label="品牌" width></el-table-column>
      <el-table-column prop="goodName" align="center" label="商品名称" width></el-table-column>
      <el-table-column prop="goodModel" align="center" label="型号"></el-table-column>
      <el-table-column prop="num" align="center" label="数量" width="80"></el-table-column>
      <el-table-column prop="unit" align="center" label="单位" width="80"></el-table-column>
      <el-table-column align="center" label="单价" width>
        <template slot-scope="scope">{{scope.row.price | moneyFormat}}</template>
      </el-table-column>
      <el-table-column prop="totalPrice" align="center" label="总价" width>
        <template slot-scope="scope">{{scope.row.price * scope.row.num | moneyFormat}}</template>
      </el-table-column>
      <el-table-column align="center" label="操作" v-if="!hideEdit" >
        <template slot-scope="scope">
          <div class="competeOperate">
            <div class="competeBtn competeEdit" @click="competeEdit(scope.row)">编辑</div>
            <div class="competeBtn competeDel" @click="competeDel(scope.row)">删除</div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="title"
      :visible.sync="isEdit"
      width="780px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :inline="true"
        :model="editData"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div class="group">
          <el-form-item label="商品品牌：" prop="goodBrand">
            <el-input
              size="small"
              maxlength="80"
              v-model="editData.goodBrand"
              placeholder="请输入商品品牌"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品名称：" prop="goodName">
            <el-input size="small" maxlength="80" v-model="editData.goodName" placeholder="请输入商品名称"></el-input>
          </el-form-item>
        </div>
        <div class="group">
          <el-form-item label="型号：" prop="goodModel">
            <el-input
              size="small"
              maxlength="80"
              v-model="editData.goodModel"
              placeholder="请输入商品型号"
            ></el-input>
          </el-form-item>
          <el-form-item label="数量：" prop="num">
            <el-input
              size="small"
              maxlength="6"
              oninput="value=value.replace(/[^\d]/g,'')"
              v-model.number="editData.num"
              placeholder="请输入商品数量"
            ></el-input>
          </el-form-item>
        </div>
        <div class="group">
          <el-form-item label="单位：" prop="unit">
            <el-input size="small" maxlength="10" v-model="editData.unit" placeholder="请输入商品单位"></el-input>
          </el-form-item>
          <div class="item">
            <el-form-item label="单价：" prop="price">
              <el-input
                size="small"
                maxlength="10"
                oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                v-model="editData.price"
                placeholder="请输入商品单价"
              ></el-input>
            </el-form-item>
            <span class="priceIcon">元</span>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer editFoot">
        <el-button size="small" @click="isEditReset">重 置</el-button>
        <el-button size="small" type="primary" @click="isEditSubmit">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    tableData: {
      type: Array,
      require: true,
    },
    hideEdit: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      isEdit: false,
      title: '编辑商品',
      pages: {
        currPage: 1,
        currSize: 10, // 当前页条数
        pageArr: [10, 20, 30, 40], // 显示每页条数
      },
      editData: {
        filingBidId: '', // 报备id
        goodName: '',
        goodBrand: '', // 品牌
        goodModel: '', // 型号
        num: '',
        unit: '',
        price: '',
      },
    }
  },

  filters: {
    moneyFormat (val) {
      val = val.toString().replace(/\$|\,/g, '')
      if (isNaN(val)) {
        val = '0'
      }
      const sign = val == (val = Math.abs(val))
      val = Math.floor(val * 100 + 0.50000000001)
      let cents = val % 100
      val = Math.floor(val / 100).toString()
      if (cents < 10) {
        cents = '0' + cents
      }
      for (var i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
        val =
          val.substring(0, val.length - (4 * i + 3)) +
          ',' +
          val.substring(val.length - (4 * i + 3))
      }

      return (sign ? '' : '-') + val + '.' + cents
    },
  },
  methods: {
    showAdd () {
      this.title = '添加商品'
      this.editData = {
        index: this.tableData ? this.tableData.length : 0,
        goodName: '',
        goodBrand: '', // 品牌
        goodModel: '', // 型号
        num: '',
        unit: '',
        price: '',
      }
      this.isEdit = true
    },
    // 竞价fun
    // 编辑商品
    competeEdit (obj) {
      this.title = '编辑商品'
      this.editData = { ...obj, index: this.tableData.indexOf(obj) }
      this.isEdit = true
    },
    // 商品信息重置
    isEditReset () {
      Object.keys(this.editData).map((item) => {
        if (item != 'index') {
          this.editData[item] = ''
        }
      })
      this.$message.success('重置成功')
    },
    // 商品编辑后提交
    isEditSubmit () {
      const keys = Object.keys(this.editData)
      for (let index = 0; index < keys.length; index++) {
        const item = keys[index]
        if (!this.editData[item]) {
          switch (item) {
            case 'goodBrand':
              this.errorTips('请输入商品品牌')
              return
            case 'goodName':
              this.errorTips('请输入商品名称')
              return
            case 'goodModel':
              this.errorTips('请输入商品型号')
              return
            case 'num':
              this.errorTips('请输入商品数量')
              return
            case 'unit':
              this.errorTips('请输入商品单位')
              return
            case 'price':
              this.errorTips('请输入商品价格')
              return
          }
        }
      }
      if (this.editData.num < 1) {
        this.errorTips('请输入正确的数量')
        return
      }
      if (this.editData.price <= 0) {
        this.errorTips('请输入正确的单价')
        return
      }

      const priceReg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/
      if (!priceReg.test(this.editData.price + '')) {
        this.errorTips('单价请保留两位小数')
        return
      }

      const index = this.editData.index
      delete this.editData.index

      this.tableData.splice(index, 1, { ...this.editData })

      this.$message({
        type: 'success',
        message: '商品信息保存成功',
      })
      this.isEdit = false
    },

    // 删除
    competeDel (obj) {
      this
        .$confirm('确认删除此条商品吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          this.tableData.splice(this.tableData.indexOf(obj), 1)
        })
        .catch(() => {})
    },
    // 分页size切换
    sizeChange (val) {
      // console.log(val)
      this.$emit('changeSize', val)
    },
    // 分页num切换
    numChange (val) {
      this.$emit('changeNum', val)
    },

    // 请求失败提示
    errorTips (txt) {
      this.$message.error(txt)
    },
  },
}
</script>
<style lang="less" scoped>
.competeTable {
  margin: 30px 0 0 0;
  text-align: center;
  .competeOperate {
    display: flex;
    align-items: center;
    .competeBtn {
      padding: 0 10px;
      cursor: pointer;
      color: #1abc9c;
    }
  }
}
.pagesBox {
  margin: 20px;
  text-align: right;
}
.group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 40px;
  .item {
    display: flex;
    align-items: center;
    position: relative;
    .priceIcon {
      position: absolute;
      top: 14px;
      right: -14px;
    }
  }
  /deep/.el-form-item {
    margin-bottom: 0;
  }
}
/deep/.el-dialog__footer {
  border-top: 1px solid #bbb;
  margin-top: 20px;
  padding-top: 20px;
  .el-button--small,
  .el-button--small.is-round {
    padding: 8px 32px;
    margin-right: 20px;
  }
  .el-button--default {
    border-color: #1abc9c;
    span {
      color: #1abc9c;
    }
  }
}
/deep/.el-dialog__header {
  padding-top: 10px;
  background: #e8f8f5;
  border: 1px solid #bbb;
  .el-dialog__title {
    font-size: 16px;
  }
  .el-dialog__headerbtn {
    top: 10px;
    font-size: 20px;
    .el-dialog__close {
      color: #101010;
    }
  }
}
/deep/.el-form-item__label {
  &:before {
    display: inline-block;
    content: '*';
    color: red;
  }
}
</style>
